<template>
	<view>
		<view class="content-box">
			<view class="bg-top"></view>
			<view class="qr-box-top">
				<view class="avatar">
					<image v-if="currentCustomer.avatar" :src="currentCustomer.avatar"></image>
					<image v-else :src="config.DEFAULT_CUSTOMER_AVATAR" mode=""></image>
				</view>
				<view class="customer-name">尊敬的{{currentCustomer.customer_name}}会员</view>
			</view>
			<view class="qr-box-mid">
				<view class="line">
					<view class="line-left"></view>
					<view class="line-mid">
						<view class="line-line"></view>
					</view>
					<view class="line-right"></view>
				</view>
			</view>
			<view class="qr-box-bottom">
				<view class="qr-img">
					<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground"
					 :pdground="pdground" :iconSize="iconsize" :onval="onval" :loadMake="loadMake" @result="qrR" />
				</view>
				<!-- <view class="customer-number">1289371982371</view> -->
				<view class="swithc-qr">会员码</view>
			</view>
			<view class="tips">
				<view class="tips-box">
					<view class="tips-item">
						<image src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/qr-bottom-ad.png"></image>
					</view>
				</view>
			</view>
			<!-- <view class="qr-box">
				
			</view> -->
		</view>
		<rwj-tabbar :current-page="2"></rwj-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				currentCustomer: {},
				val: "", // 要生成的二维码值,
				size: 300, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				iconsize: 45, // 二维码图标大小
				onval: false, // val值变化时自动重新生成二维码
				loadMake: false, // 组件加载完成后自动生成二维码
				qrSrc: '', // 二维码生成后的图片地址或base64
				showQR: true,
			}
		},
		onShow() {
			this.userInfo = getApp().globalData.userInfo;
			if (getApp().globalData.currentCustomer) {
				this.currentCustomer = getApp().globalData.currentCustomer;
				// 	// const key = ENC.parse(this.config.privateKey);
				// 	// const iv = ENC.parse(this.config.privateIV);
				// 	// // 加密
				// 	// let encrypted = AES.encrypt(this.currentCustomer.customer_id.toString(), key, { iv: iv });
				// 	// this.val = ENC64.stringify(ENC64.parse(encrypted.toString()))
				// 	// console.log('密闻', this.val, this.currentCustomer.customer_id);
				this.val = this.currentCustomer.customer_id;
				console.log('this.val', this.val);
				if (!this.currentCustomer.avatar) {
					this.currentCustomer.avatar = this.config.DEFAULT_CUSTOMER_AVATAR
				}
			}
			let that = this;
			setTimeout(function() {
				that.createQrcode()
			}, 100)
		},
		methods: {
			createQrcode() {
				console.log('xxx');
				this.$refs.qrcode._makeCode()
			},
			saveQrcode(e) {
				console.log(e)
				this.$refs.qrcode._saveCode()
			},
			qrR(res) {
				this.qrSrc = res
				console.log('src', res);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		// border: 1rpx solid #0081FF;
		.bg-top {
			width: 750rpx;
			height: 640rpx;
			background-image: url('https://storage.ganorglobal.com/miniapp-service/static/pub-img/qr-top-bg.png');
			background-size: cover;
		}

		.qr-box-top {
			width: 600rpx;
			height: 180rpx;
			margin-top: -360rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			border-top: 1rpx solid #4A4A4A;
			border-left: 1rpx solid #4A4A4A;
			border-right: 1rpx solid #4A4A4A;

			.avatar image{
				width: 160rpx;
				height: 160rpx;
				margin-top: -80rpx;
				border: 1rpx solid #4A4A4A;
				border-radius: 50%;
				background-color: #FFFFFF;
			}

			.customer-name {
				max-width: 600rpx;
				height: 50rpx;
				line-height: -50rpx;
				margin-top: 48rpx;
			}
		}

		.qr-box-mid {
			width: 600rpx;
			height: 50rpx;
			display: flex;
			align-items: center;

			.line {
				display: flex;
				align-items: center;

				.line-left {
					width: 50rpx;
					height: 50rpx;
					background-image: radial-gradient(circle at 0rpx 25rpx, transparent 0%, transparent 25rpx, #fff 0px, #fff 0rpx);
				}

				.line-mid {
					width: 500rpx;
					height: 50rpx;
					background-color: #FFFFFF;
					padding-top: 24rpx;

					.line-line {
						height: 1rpx;
						border-top: 1rpx dashed #CCCCCC;
					}
				}

				.line-right {
					width: 50rpx;
					height: 50rpx;
					background-image: radial-gradient(circle at 50rpx 25rpx, transparent 0%, transparent 25rpx, #fff 0px, #fff 0rpx);
				}
			}
		}

		.qr-box-bottom {
			width: 600rpx;
			height: 500rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #4A4A4A;
			border-left: 1rpx solid #4A4A4A;
			border-right: 1rpx solid #4A4A4A;

			.qr-img {
				align-items: center;
				margin-top: 40rpx;
			}
		}

		.tips {
			width: 600rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 200rpx;

			.tips-box {
				.tips-item image {
					height: 200rpx;
				}
			}
		}

		// .qr-box{
		// 	width: 200px;
		// 	height: 200px;
		// 	display: flex;
		// 	justify-content: center;
		// 	flex-direction: row;
		// 	align-items: center;
		// 	margin-top: 220rpx;
		// 	image{
		// 		width: 100%;
		// 		// height: 100%;
		// 	}
		// }
	}
</style>
